<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入客户名称"
              v-model="searchForm.searchInput"
            />
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="searchForm.searchSelectValue"
              placeholder="请选择项目类型"
              @change="selectChange"
            >
              <el-option
                v-for="item in customerTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="primary" icon="el-icon-plus" @click="newAdmin"
          >添加管理员账户</el-button
        >
        <el-button type="success" icon="el-icon-refresh" @click="refresh"
          >刷新</el-button
        >
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
          ref="tableRef"
        >
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center"
          />
          <el-table-column prop="projectName" label="项目名称" align="center" />
          <el-table-column
            prop="customerName"
            label="所属客户"
            align="center"
          />
          <el-table-column prop="adminName" label="用户昵称" align="center" />

          <el-table-column label="用户账号" align="center" prop="adminPhone" />

          <el-table-column label="创建时间" align="center" prop="createTime">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="400" align="center">
            <template #default="{ row }">
              <el-button type="warning" size="mini" @click="handlerEdit(row)"
                >编辑
              </el-button>
              <el-button type="primary" size="mini" @click="handlerReset(row)">
                重置密码
              </el-button>

              <div class="status">
                <el-button
                  type="success"
                  size="mini"
                  @click="handlerStatus(row)"
                  v-if="row.status == '0'"
                  >启用</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handlerStatus(row)"
                  v-else
                  >禁用</el-button
                >
              </div>
              <el-button type="danger" size="mini" @click="handlerDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newAdminModel"
            :rules="rules"
            ref="loginFormRef"
            label-width="100px"
          >
            <el-form-item label="客户名称" prop="customerCode">
              <el-select
                v-model="newAdminModel.customerCode"
                placeholder="选择客户"
                :disabled="detailsDisabled"
              >
                <el-option
                  v-for="item in customerData"
                  :key="item.customerCode"
                  :label="item.customerName"
                  :value="item.customerCode"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="项目名称" prop="projectCode">
              <el-select
                v-model="newAdminModel.projectCode"
                placeholder="选择项目"
                :disabled="detailsDisabled"
              >
                <el-option
                  v-for="item in projectData"
                  :key="item.projectCode"
                  :label="item.projectName"
                  :value="item.projectCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="用户昵称" prop="adminName">
              <el-input
                v-model="newAdminModel.adminName"
                :disabled="detailsDisabled"
              />
            </el-form-item>
            <el-form-item label="用户账号" prop="adminPhone">
              <el-input
                v-model="newAdminModel.adminPhone"
                :disabled="detailsDisabled"
              />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false"
          >取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
import {
  queryPageProjectToAdmin,
  insertProjectAdmin,
  deleteProjectAdmin,
  updateProjectAdmin,
  deactivate,
  resetPassword,
  queryPageCustomer,
  queryPageProject
} from "@/api/clientOrObject/admin"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      customerTypeOptions: [
        {
          label: "厂区类客户",
          value: "厂区类客户"
        },
        {
          label: "园区类客户",
          value: "园区类客户"
        },
        {
          label: "私人客户",
          value: "私人客户"
        },
        {
          label: "高能耗客户",
          value: "高能耗客户"
        },
        {
          label: "学校客户",
          value: "学校客户"
        }
      ],
      searchOptions: [
        {
          label: "顾清曦",
          value: "gqx"
        }
      ],
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newAdminModel: {
        customerName: "",
        customerType: "",
        projectType: "",
        adminName: "",
        adminPhone: "",
        redType: "",
        id: "",
        customerCode: "",
        projectCode: ""
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,
      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      customerLogo: "",
      customerLicense: "",
      acceptString: ".png,  .jpg",
      fileType: ["image/png", "image/jpg"],
      loading: false,
      customerData: [],
      projectData: [],
      rules: {
        customerCode: [
          { required: true, message: "请选择客户", trigger: "change" }
        ],
        projectCode: [
          { required: true, message: "请选择项目", trigger: "change" }
        ],
        adminName: [
          { required: true, message: "请输入用户昵称", trigger: "blur" }
        ],
        adminPhone: [
          { required: true, message: "请输入用户账号", trigger: "blur" }
        ]
      }
    }
  },
  components: {
    ycDialog
  },
  async created() {
    await this.getPageCustomer()
    await this.queryPageCustomer()
    await this.queryPageProject()
  },
  methods: {
    async queryPageProject() {
      const data = await queryPageProject({
        pageIndex: 1,
        pageSize: 10000
      })
      console.log(data, "data")
      this.projectData = data.object.data
      console.log(this.projectData, " this.projectData")
    },
    async queryPageCustomer() {
      const data = await queryPageCustomer({
        pageIndex: 1,
        pageSize: 10000
      })
      this.customerData = data.object.data
      console.log(this.customerData, " this.customerData")
    },
    async getPageCustomer(pageIndex = 1, pageSize = 20, tableInfo = {}) {
      this.loading = true
      const { searchInput, searchSelectValue } = tableInfo
      const { object } = await queryPageProjectToAdmin({
        pageIndex,
        pageSize,
        customerName: searchInput,
        customerType: searchSelectValue
      })
      console.log(object)
      this.count = object.count
      this.tableData = object.data
      this.loading = false
    },
    newAdmin() {
      this.dialogCenterTitle = "管理员账户信息"
      this.dialogTitle = "添加管理员"
      this.$refs.ycDialog.dialogVisible = true

      this.detailsDisabled = false

      Object.keys(this.newAdminModel).forEach((item) => {
        this.newAdminModel[item] = ""
      })
      this.$refs.loginFormRef.clearValidate()
    },
    handlerEdit(row) {
      this.dialogCenterTitle = "客户基本信息"
      this.dialogTitle = "客户详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef.clearValidate()
      this.detailsDisabled = false
      this.newAdminModel.customerName = row.customerName
      this.newAdminModel.customerType = row.customerType
      // this.newAdminModel.projectType = row.projectType
      this.newAdminModel.adminPhone = row.adminPhone
      this.newAdminModel.adminName = row.adminName
      this.newAdminModel.redType = row.redType
      this.newAdminModel.id = row.id
      this.newAdminModel.customerCode = row.customerCode
      this.newAdminModel.projectCode = row.projectCode

      console.log(row)
    },

    /**
     * 启用或者禁用按钮
     */
    async handlerStatus({ id, status }) {
      const confirmMessageMap = status == 1 ? "确定禁用吗" : "确定启用吗"
      this.$confirm(confirmMessageMap, "禁用/启用操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(async () => {
        const { message } = await deactivate({ id })
        if (message == "操作成功") {
          this.getPageCustomer()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    /**
     * 重置按钮
     */
    async handlerReset({ id }) {
      this.$confirm("确定重置密码吗", "重置操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(async () => {
        const { message } = await resetPassword({ id })
        if (message == "重置成功") {
          this.getPageCustomer()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    searchClick() {
      this.getPageCustomer(1, 20, this.searchForm)
    },
    async dialogSave() {
      this.$refs.loginFormRef.validate(async (v) => {
        if (v) {
          if (this.detailsDisabled) {
            // 详情
            this.$refs.ycDialog.dialogVisible = false
          } else if (this.newAdminModel.customerName && this.newAdminModel.id) {
            // 编辑
            const { status } = await updateProjectAdmin({
              ...this.newAdminModel
            })
            if (status == 200) {
              this.isGlobalMessageShow = true
              this.getPageCustomer()
              this.$refs.ycDialog.dialogVisible = false
              this.message = "success"
            } else {
              this.message = "error"
            }
          } else {
            this.newInsertCustomer()
            this.getPageCustomer()
            this.$refs.ycDialog.dialogVisible = false
          }
        }
      })
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    async newInsertCustomer() {
      console.log(this.newAdminModel, "newAdminModel")
      const { status } = await insertProjectAdmin({ ...this.newAdminModel })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    },
    async handlerDelete({ id }) {
      this.$confirm("确定删除此用户吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteProjectAdmin({ id })
        if (status == 200) {
          console.log(id)
          this.getPageCustomer()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageCustomer(pageItem.page, pageItem.limit)
    },

    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageCustomer()
    }
  }
}
</script>
<style lang="scss" scoped>
.status {
  display: inline-block;
  padding: 0 10px;
}
.clientType {
  .title-container {
    display: flex;
    justify-content: flex-end;
    .left-box {
      width: 550px;
      .formClass {
        display: flex;
        justify-content: space-around;
        margin-right: 8px;
        .el-form-item {
          margin-top: 20px;
          margin-bottom: 0;
          .el-input {
            width: 216px;
          }
          .el-select {
            width: 171px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  /* cursor: no-drop; */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.drop {
  cursor: no-drop;
}
</style>
